<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <link rel="stylesheet" href="css/myequipment.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/fontzize.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/jsonAjax.js"></script>
    <style>
        body{ padding-top: 0;}
        header{ width: 100%; height: 45px;  background: #f8f8f8; position: static; }
        header nav{height: 100%; vertical-align: middle; display: inline-block;}
        header nav:nth-of-type(1){ width: 20%;text-align: left; padding-left: 10px; box-sizing:border-box;}
        header nav:nth-of-type(2){ width: 60%;}
        header nav:nth-of-type(3){ width: 20%; color: #00cc33 ;font-size: 0.85rem;}
        dl{height: 3rem; line-height: 3rem; border-bottom:#dddddd solid 1px; width: 95%; margin: auto; font-size: 0; }
        dl dt{ height: 3rem; width: 10%; display: inline-block; vertical-align: middle;}
        dl dt img{ width: auto; height: 40%; vertical-align: middle;}
        dl dd{ height: 3rem;  display: inline-block; vertical-align: middle;}
        dl dd img{ width: auto; height: 25%; vertical-align: middle;}
        dl dd:nth-of-type(1){  width: 60%; font-size: 0.85rem;}
        dl dd:nth-of-type(2){  width: 30%; text-align: right;}
        .popup{position: fixed; z-index: 2; top: 0; bottom: 0; left: 0; width: 100%; height: 100%;}
        .editor_box{height: 100%; box-sizing: border-box; padding-top: 20%;position: relative; margin:auto; max-width:680px;overflow-x: hidden;  background: rgba(0,0,0,0.2);}
        .editor_box .editor{width: 80%;height: 14%; text-align: center; line-height: 80px;  border-radius: 6px; position: absolute; top:35%; left: 10%; background: #fff; }
        .editor_box .determination{left: 26%; color: #fff; background: #14cc4c;width: 55px;height: 55px; line-height: 55px; text-align: center; border-radius:55px; position: absolute; top:53%; -moz-box-shadow: 0px 1px 13px #1c850c;-webkit-box-shadow: 0px 1px 13px #1c850c; box-shadow: 0px 1px 13px #1c850c; }
        .editor_box .cancelled{right: 26%;  background: #dddddd; width: 55px;height: 55px; line-height: 55px; text-align: center; border-radius:55px; position: absolute; top:53%;  }

    </style>
</head>
<body>
<div id="app">
    <header>
        <nav @click="goback"><img src="imgs/arrow_left.png"></nav>
        <nav>设备管理</nav>
        <nav @click="configuration">设备配置</nav>
    </header>
    <section>
        <dl>
            <dt><img src="imgs/configuration1.png"/></dt>
            <dd>设备信息</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>
        <dl>
            <dt><img src="imgs/configuration2.png"/></dt>
            <dd>参数设置</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>
        <dl>
            <dt><img src="imgs/configuration3.png"/></dt>
            <dd>状态监测</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>
        <dl>
            <dt><img src="imgs/configuration4.png"/></dt>
            <dd>设备重启</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>
        <dl>
            <dt><img src="imgs/configuration5.png"/></dt>
            <dd>时间校准</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>
        <dl>
            <dt><img src="imgs/configuration6.png"/></dt>
            <dd>绑定用户</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>
        <dl>
            <dt><img src="imgs/configuration7.png"/></dt>
            <dd>数据清除</dd>
            <dd><img src="imgs/arrow_right.png"/></dd>
        </dl>

    </section>
    <aside>
        <div class="popup" style="display: none;">
            <div class="editor_box">
                <div class="editor">确定清楚该设备数据？</div>
                <div class="determination">确定</div>
                <div class="cancelled">取消</div>
            </div>
        </div>
    </aside>
    </section>
</div>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            defaindex:0
        },
        mounted: function () {
            var _this = this;
            //获取外部链接参数
            function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null)return unescape(r[2]);
                return null;
            }
            var myurl = GetQueryString("device_id");
            if (myurl != null && myurl.toString().length > 1) {
                _this.device_id =Number(GetQueryString("device_id").substr(1));
            }
            else {
              //  window.location.href = "http://192.168.0.138";
            }
            //获取外部链接参数


        },
        methods: {
            goback:function () {
                var _this=this;
                window.location.href="http://192.168.0.138/kitContents/ubddevice.html?details="+_this.device_id+""
            },
            configuration:function () {

            }

        }

    });

</script>
</body>

</html>

